<template>
	<view class="container">
		<!-- 标题 -->
		<headTitle :title="carouselData.name || ''" :subject="true"></headTitle>
		<!-- 内容区域 -->
		<view class="content">
			<view class="carousel-section">
				<swiper autoplay :interval="3000" circular class="carousel" @change="toggle">
					<swiper-item v-for="(item, index) in carouselData.albumImages || []" :key="index">
						<image :src="item" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="carousel-content flex-center-between">
					<view class="carousel-text font30 color333 fontb">{{carouselData.subtitle || ''}}</view>
					<view class="carousel-index font24 colorfff">
						{{ currentIndex + "/" + (carouselData.albumImages && carouselData.albumImages.length) || 0 }}
					</view>
				</view>
			</view>
			<view class="list">
				<view class="list-title font30 color333 fontb">相关单品</view>
				<view class="flex-wrap">
					<shop v-for="(item, index) in shopsList" :key="index" :item="item"></shop>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/common/api'
import shop from '@/components/shop.vue'
import headTitle from '@/components/head-title.vue'
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
export default {
	data() {
		return {
			id: 0, // 专题id
			carouselData: {}, // 轮播图
			pageNum: 1,
			loadingType: 'more', //加载更多状态
			shopsList: [], // 相关单品
			currentIndex: 1, // 轮播图第几张
		}
	},
	onLoad(options) {
		this.id = options.num
		this.getBanner()
		this.getShops('refresh')
	},
	// 加载更多
	onReachBottom() {
		this.pageNum += 1
		this.getShops()
	},
	methods: {
		// 轮播图切换
		toggle(e) {
			this.currentIndex = e.detail.current + 1
		},
		// 获取轮播图的数据
		async getBanner() {
			let res = await api.apiCall('get', api.subject.getSubjectCarousel, {id: this.id}, true)
			if(res) {
				this.carouselData = res
			}
		},
		// 获取相关单品列表
		async getShops(type = 'add') {
			if(type === 'add') {
				if (this.loadingType === 'nomore') {
					return
				}
				this.loadingType = 'loading'
			}else {
				this.loadingType = 'more'
			}
			let res = await api.apiCall('get', api.subject.getSubjectList, {
				subjectId: this.id,
				pageIndex: this.pageNum,
				pageSize: 10,
			})
			let goodsList = res.recordList
			if (type === 'refresh') {
				this.shopsList = []
			}
			this.shopsList = this.shopsList.concat(goodsList)
			// 判断是否有下一页数据
			this.loadingType = res.hasMore == 0 ? 'nomore' : 'more'
		}
	},
	components:{
		uniLoadMore,
		shop,
		headTitle,
	}
}
</script>

<style lang="scss">
page,
.content {
	width: 100%;
	height: 100%;
}

/* 内容区域 */
.content {
	background-color: #F7F7F7;
	.carousel-section {
		width: 100%;
		height: 540rpx;
		position: relative;
		.carousel {
			width: 100%;
			height: 100%;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.carousel-content {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 102rpx;
			background-color: rgba(255, 255, 255, 0.8);
			padding: 30rpx;
			.carousel-text {
				letter-spacing: 1.5rpx;
			}
			.carousel-index {
				width: 76rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background-color: rgba(179, 156, 130, 0.8);
				border-radius: 22rpx;
				letter-spacing: 1rpx;
			}
		}
	}
	.list {
		padding: 0 30rpx;
		.list-title {
			width: 100%;
			height: 30rpx;
			letter-spacing: 1.5rpx;
			margin: 34rpx 0;
		}
	}
}
</style>
